<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
</style>
<template>
    <div class="home-main">
        <Row :gutter="10">
            <Col :md="24" :lg="6">
                <Row class-name="home-page-row1" :gutter="10">
                    <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
                        <Card>
                            <Row type="flex" class="user-infor">
                                <Col span="24" align="center" style="padding-left:6px;">
                                    <Row class-name="made-child-con-middle" align="middle">
                                        <div class="clock">
                                            <p class="date">{{ data.date }}</p>
                                            <p class="time">{{ data.time }}</p>
                                        </div>
                                    </Row>
                                </Col>
                            </Row>
                            <div class="line-gray"></div>
                            <Row class="margin-top-8">
                                <Col span="24"><p class="notwrap"><Button @click="addReservation" type="success" long>开始预约</Button></p></Col>
                            </Row>
                        </Card>
                    </Col>
                </Row>
                <!--<Row class-name="home-page-row1" :gutter="10">-->
                  <!--<Col :md="12" :lg="24" :style="{marginBottom: '10px'}">-->
                    <!--<Card>-->
                      <!--<p slot="title" class="card-title">-->
                        <!--<Icon type="calendar"></Icon>-->
                        <!--系统公告-->
                      <!--</p>-->
                    <!--</Card>-->
                  <!--</Col>-->
                <!--</Row>-->
                <Row class-name="home-page-row1" :gutter="10">
                    <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
                      <Card>
                        <p slot="title" class="card-title">
                          <Icon type="android-checkbox-outline"></Icon>
                          待办事项
                        </p>
                        <div class="to-do-list-con">
                          <Row type="flex" justify="start" class="code-row-bg">
                            <Col v-for="(item, index) in workList">
                              <Tag type="dot" color="blue">{{item.workContent}}</Tag>
                            </Col>
                          </Row>
                        </div>
                      </Card>
                    </Col>
                </Row>
                <!--<Row class-name="home-page-row1" :gutter="10">-->
                    <!--<Col :md="12" :lg="24" :style="{marginBottom: '10px'}">-->
                        <!--<Card>-->
                            <!--<p slot="title" class="card-title">-->
                                <!--<Icon type="calendar"></Icon>-->
                                <!--任务中心-->
                            <!--</p>-->
                            <!--<Row>-->
                                <!--<Col span="12">-->
                                    <!--<infor-card @click.native="showReception"-->
                                        <!--id-name="visit_count"-->
                                        <!--:end-val="100"-->
                                        <!--iconType="eye"-->
                                        <!--color="#64d572"-->
                                        <!--:iconSize="50"-->
                                        <!--intro-text="今日接待"-->
                                    <!--&gt;</infor-card>-->
                                <!--</Col>-->
                                <!--<Col span="12">-->
                                    <!--<infor-card @click.native="showReception"-->
                                                <!--id-name="visit_count"-->
                                                <!--:end-val="count.visit"-->
                                                <!--iconType="eye"-->
                                                <!--color="#64d572"-->
                                                <!--:iconSize="50"-->
                                                <!--intro-text="电话随访"-->
                                    <!--&gt;</infor-card>-->
                                <!--</Col>-->
                            <!--</Row>-->
                            <!--<Row>-->
                                <!--<Col span="12">-->
                                    <!--<infor-card @click.native="showReception"-->
                                                <!--id-name="visit_count"-->
                                                <!--:end-val="count.visit"-->
                                                <!--iconType="eye"-->
                                                <!--color="#64d572"-->
                                                <!--:iconSize="50"-->
                                                <!--intro-text="今日完成"-->
                                    <!--&gt;</infor-card>-->
                                <!--</Col>-->
                                <!--<Col span="12">-->
                                    <!--<infor-card @click.native="showReception"-->
                                                <!--id-name="visit_count"-->
                                                <!--:end-val="count.visit"-->
                                                <!--iconType="eye"-->
                                                <!--color="#64d572"-->
                                                <!--:iconSize="50"-->
                                                <!--intro-text="未完成"-->
                                    <!--&gt;</infor-card>-->
                                <!--</Col>-->
                            <!--</Row>-->
                        <!--</Card>-->
                    <!--</Col>-->
                <!--</Row>-->
            </Col>
            <Col :md="24" :lg="18">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="calendar"></Icon>
                        任务中心
                    </p>
                    <Tabs :value="selectTabPane" @on-click="clickTabs">
                        <TabPane label="今日接待" name="1">
                            <reception ref="reception"></reception>
                        </TabPane>
                        <TabPane label="电话随访" name="2">
                            <visit ref="visit"></visit>
                        </TabPane>
                        <TabPane label="今日完成" name="3">
                            <complete ref="complete"></complete>
                        </TabPane>
                        <TabPane label="未完成" name="4">
                            <undone ref="undone"></undone>
                        </TabPane>
                    </Tabs>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script>
import cityData from './map-data/get-city-value.js';
import homeMap from './components/map.vue';
import dataSourcePie from './components/dataSourcePie.vue';
import visiteVolume from './components/visiteVolume.vue';
import serviceRequests from './components/serviceRequests.vue';
import userFlow from './components/userFlow.vue';
import countUp from './components/countUp.vue';
import inforCard from './components/inforCard.vue';
import mapDataTable from './components/mapDataTable.vue';
import toDoListItem from './components/toDoListItem.vue';
import reception from '@/view/business/reservation/Reception.vue';
import visit from '@/view/business/reservation/Visit.vue';
import complete from '@/view/business/reservation/Complete.vue';
import undone from '@/view/business/reservation/Undone.vue';
import music from './music.vue'
export default {
    name: 'home',
    components: {
        homeMap,
        dataSourcePie,
        visiteVolume,
        serviceRequests,
        userFlow,
        countUp,
        inforCard,
        mapDataTable,
        toDoListItem,
        reception,
        visit,
        complete,
        undone,
        music
    },
    data () {
        return {
            username: this.$store.state.app.loginUser.username,
            week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            data: {
                time: '',
                date: ''
            },
            count: {
                createUser: 496,
                visit: 3264,
                collection: 24389305,
                transfer: 39503498
            },
            cityData: cityData,
            showAddNewTodo: false,
            newToDoItemValue: '',
            selectTabPane: '',
            workList: []
        };
    },
    computed: {
        avatorPath () {
            return localStorage.avatorImgPath;
        }
    },
    methods: {
        clickTabs (name) {
            if (name === '1') {
               this.$refs.reception.init()
            } else if (name === '2') {
                this.$refs.visit.init()
            } else if (name === '3') {
                this.$refs.complete.search()
            } else if (name === '4') {
                this.$refs.undone.search()
            }
            this.selectTabPane = name
        },
        updateTime () {
            var cd = new Date();
            this.data.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
            this.data.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth()+1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.week[cd.getDay()];
        },
        zeroPadding (num, digit) {
            var zero = '';
            for (var i = 0; i < digit; i++) {
                zero += '0';
            }
            return (zero + num).slice(-digit);
        },
        addReservation () {
            this.$bus.toPath('/reservation/details')
        },
        showReception () {
            this.$bus.toPath('/reception')
        },
        searchWorkList () {
            let url = '/user/work/findByUser'
            this.$ajax.get(url).then(response => {
                let {code, data, msg} = response.data
                if (code === 0) {
                    this.workList = data
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        init () {
            this.searchWorkList()
        }
    },
    created () {
        setInterval(this.updateTime, 1000)
    }
};
</script>
<style>

p {
  margin: 0;
  padding: 0;
}

.clock {
  font-family: 'Share Tech Mono', monospace;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #5cadff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
.date {
  letter-spacing: 0.1em;
  font-size: 24px;
}
.time {
  letter-spacing: 0.05em;
  font-size: 80px;
}
</style>
